<template>
    <div class="mt10">
      <AplidForm v-model="searchModel" v-bind="serviseCoverageConfig" ref="searchRef" :showRules="false" @reset="onReset"
        @submit="onSearch" />
  
      <el-table show-summary :summary-method="getSummaries" :data="tableData" style="width: 100%">
        <el-table-column align="center" :label="currentName+'居家绩效考核对象统计'">
            <el-table-column label="街道/社区" prop="name">
            </el-table-column>
            <el-table-column label="服务人数" align="center" prop="servicePersonnelNum" />
            <el-table-column label="户籍老年人口" align="center" prop="registeredPopulationSecond" />
            <el-table-column label="覆盖率" align="center" prop="serviceCoverageRate" />
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { serviseCoverageConfig } from '../config'
  import apiMod from '@/apiMod'
  const userInfo = JSON.parse(sessionStorage.getItem('apld-xningxiang-userInfo')).content
  let currentName = ref('')
  currentName.value = userInfo.organizationName
  const activeArea = ref('')
  const nowAreaList = ref([
    {
      label: '当前市名称',
      value: '',
      level: 0
    },
  ])
  const searchModel = ref()
  const tableData = ref([])
  const nowRowData = ref({})
  const currentArea = ref()

  // 市看区1,区看街道2，街道看社区传3，本社区传0
  let classifyList = ref([])
  let classifyLength = ref(0)
  let lastLevel = ref(0)
 // 计算
 let totalSum = ref(0)
  const getSummaries = (param) =>{
    const { columns, data } = param
    const sums = []
    columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = '合计'
      return
    }
    if (index === 3) {
      sums[index] = totalSum.value
      return
    }
   
    const values = data.map((item,index) =>{
      return Number(Number((String(item[column.property]).replace('%',''))))
    })
    if (!values.every((value) => Number.isNaN(value))) {
      sums[index] = `${values.reduce((prev, curr) => {
        const value = Number(curr)
        if (!Number.isNaN(value)) {
          return prev + curr
        } else {
          return prev
        }
      }, 0)}${index==3?'%':''}`
    }
  })
  return sums
  }
  const getInitData = () => {
    apiMod.view_statistics_serviceCoverage({
      yearMonth: searchModel.value?.yearMonth|| ''
    }).then(res=>{
      totalSum.value = res.data.serviceCoverageRateSum
      tableData.value = res.data.resp
      console.log(tableData.value)
    })
  }
  const onSearch = (form, done) => {
    console.log('查看',form)
    searchModel.value = form
    getInitData()
    done()
  }
  
  const onReset = () => {
    searchModel.value = {}
   
      getInitData()
  }
  
  onMounted(() => {
    getInitData()
  })
  </script>
  
  <style scoped lang="scss">
  .nav-box {
    width: 100%;
    display: flex;
    gap: 20px;
    padding-bottom: 10px;
  
    .nav-item {
      position: relative;
  
      &:not(:last-child):after {
        content: '>';
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        right: -25px;
        font-weight: bold;
      }
  
      &:hover {
        cursor: pointer;
      }
    }
  
    .active {
      color: rgb(6, 69, 243);
      font-weight: bold;
    }
  }
  </style>
  